<template>
  <dv-border-box-12 id="weatherBody" :style="{height, width}">
    <el-container>
      <el-header>
        <div id="header">
          <h4 class="text">当前城市：天津</h4>
        </div>
      </el-header>
      <el-main>
        <div id="mainBody">
          <el-container>
            <div id="mainIcon">
              <!--            <img :src="weatherInfo.now.icon" alt="">-->
              <svg-icon :icon-class="weatherInfo.now.icon" class-name="weatherIcon" />
            </div>
            <div id="text">
              <h1 class="text">{{ weatherInfo.now.text }}</h1>
            </div>
            <div id="temp">
              <h1 class="text">{{ weatherInfo.now.temperature }}°</h1>
            </div>
          </el-container>
        </div>
      </el-main>
      <el-divider />
      <el-footer>
        <el-container>
          <div id="reportBody">
            <div id="today" class="report">
              <div class="reportTitle">今天</div>
              <svg-icon :icon-class="weatherInfo.daily[0].iconDay" class-name="weatherIcon" />
              <div class="dailyTemp">{{ weatherInfo.daily[0].temperatureMin }}°/{{ weatherInfo.daily[0].temperatureMax }}°</div>
            </div>
            <div id="tomorrow" class="report">
              <div class="reportTitle">明天</div>
              <svg-icon :icon-class="weatherInfo.daily[1].iconDay" class-name="weatherIcon" />
              <div class="dailyTemp">{{ weatherInfo.daily[1].temperatureMin }}°/{{ weatherInfo.daily[1].temperatureMax }}°</div>
            </div>
            <div id="after-tomorrow" class="report">
              <div class="reportTitle">后天</div>
              <svg-icon :icon-class="weatherInfo.daily[2].iconDay" class-name="weatherIcon" />
              <div class="dailyTemp">{{ weatherInfo.daily[2].temperatureMin }}°/{{ weatherInfo.daily[2].temperatureMax }}°</div>
            </div>
          </div>
        </el-container>
      </el-footer>
    </el-container>
  </dv-border-box-12>
</template>

<script>
import { weatherReport, nowWeather } from '@/api/weather'
export default {
  props: {
    id: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
      // default: '300px'
    },
    height: {
      type: String,
      default: '325px'
    }
  },
  data() {
    return {
      weatherInfo: {
        now: {
          temperature: null,
          icon: null,
          text: null,
          humidity: null
        },
        daily: [
          {
            temperatureMax: null,
            temperatureMin: null,
            iconDay: null,
            textDay: null
          },
          {
            temperatureMax: null,
            temperatureMin: null,
            iconDay: null,
            textDay: null
          },
          {
            temperatureMax: null,
            temperatureMin: null,
            iconDay: null,
            textDay: null
          }
        ]
      }
    }
  },
  created() {
    this.getWeatherInfo()
  },
  methods: {
    getWeatherInfo() {
      nowWeather().then((res) => {
        this.weatherInfo.now.temperature = res.now.temp
        this.weatherInfo.now.icon = res.now.icon
        this.weatherInfo.now.text = res.now.text
        this.weatherInfo.now.humidity = res.now.humidity
      }).catch(err => {
        console.log(err)
      })
      weatherReport().then(res => {
        for (let i = 0; i < 3; i++) {
          this.weatherInfo.daily[i].temperatureMax = res.daily[i].tempMax
          this.weatherInfo.daily[i].temperatureMin = res.daily[i].tempMin
          this.weatherInfo.daily[i].iconDay = res.daily[i].iconDay
          this.weatherInfo.daily[i].textDay = res.daily[i].textDay
        }
      })
    }
  }
}
</script>

<style scoped>
#weatherBody {
  background-color: #1b275e;
}
#mainIcon {
  width: 30%;
}
.report {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 33%;
}
#reportBody {
  display: flex;
  width: 100%;
  flex-direction: row;
  /*justify-content: center;*/
  align-items: stretch;
}
.text {
  color: white;
}
.reportTitle {
  color: white;
}
.dailyTemp {
  color: white;
}
.weatherIcon {
  color: white;
}
#weatherBody {
  border-radius: 10px;
  box-shadow: 0 8px 16px 0 rgb(21, 20, 20);
}
</style>
